<template>
    <router-link class="idx" :to="site.componentUrl" active-class="act">{{ site.name }}</router-link>
</template>
<script>
    export default {
        props:['site']
    }
</script>
<style scoped>
    .idx{
        flex: 1;
        height: 50px;
        line-height: 50px;
        text-align: center;
        /* border: 1px solid black; */
        border-radius: 10px;
        font-size: 20px;
        text-decoration: none;
        color:rgb(109, 74, 10);
    }
    .idx:hover{
        background-color: rgba(64, 106, 161, 0.603);
        color: rgb(255, 239, 13);
    }
    .act{
        background-color: rgba(64, 106, 161, 0.603);
        color: rgb(255, 239, 13);
    }
</style>